﻿@{
    Layout = null;
    ExChange.Model.Member member = (ExChange.Model.Member)ViewBag.LoginMember;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>@ViewBag.Title</title>
    <script src="~/Content/js/jquery-3.1.1.min.js"></script>
    <script src="~/Layer/layer.js"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            background-color: #fff;
        }

        .content-top {
            height: auto;
            text-align: center;
            width: 100%;
            top: 0;
            left: 0;
            height: 30px;
            padding: 10px 0 0 0;
            font-size: 14px;
            background-color: #acd0e3;
            border-radius: 0 0 20px 20px;
            border-bottom: 5px #f8e191 solid;
            box-shadow: 0 0 10px #e4f1f8 inset;
            position: fixed;
            box-shadow: 0 0 10px #000;
        }

            .content-top span {
                color: #ff0000;
            }

        .content-more {
            width: calc(100% - 20px);
            padding: 10px 10px;
        }

            .content-more .a {
                display: block;
                width: 100%;
                text-align: center;
                border: 1px #83cede solid;
                padding: 8px 0;
                font-size: 12px;
                border-radius: 9px;
                color: #83cede;
                background-color: #ebf6f8;
                text-decoration: none;
            }

        .content-list {
            width: 100%;
            height: auto;
            overflow: auto;
            margin-top: 50px;
            min-height: 250px;
        }

            .content-list .list-ware {
                width: calc(100% - 20px);
                padding: 10px;
                overflow: auto;
                border-bottom: 1px #ddd solid;
            }

                .content-list .list-ware div {
                    float: left;
                }

                .content-list .list-ware .ware-img {
                    width: 30%;
                    height: auto;
                }

                    .content-list .list-ware .ware-img img {
                        width: 100%;
                    }

                .content-list .list-ware .ware-text {
                    width: calc(70% - 10px);
                    padding-left: 10px;
                    height: auto;
                }

                    .content-list .list-ware .ware-text span {
                        display: block;
                    }

                    .content-list .list-ware .ware-text .ware-title {
                        font-size: 16px;
                        color: #555;
                    }

                    .content-list .list-ware .ware-text .ware-des {
                        font-size: 12px;
                        margin-top: 8px;
                        color: #aaa;
                    }

                    .content-list .list-ware .ware-text .ware-count-price {
                        font-size: 12px;
                        margin-top: 8px;
                        color: green;
                    }

                    .content-list .list-ware .ware-text a {
                        display: block;
                        width: 60%;
                        float: right;
                        text-align: center;
                        border: 1px #ffb5b5 solid;
                        padding: 8px 0;
                        font-size: 12px;
                        border-radius: 15px;
                        color: #fff;
                        background-color: #ff7777;
                        text-decoration: none;
                        margin-top: 8px;
                        box-shadow: 0 0 30px #fff inset;
                    }

        .content-more .nodata {
            display: block;
            width: 100%;
            text-align: center;
            border: 1px #ccc solid;
            padding: 8px 0;
            font-size: 12px;
            border-radius: 9px;
            color: #bbb;
            background-color: #f9f9f9;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="content-top">
        商品列表 @Html.Raw(member == null ? "" : "<span>" + member.Phone + "</span>")
        <input type="hidden" value="@ViewBag.levels" id="levels" />
    </div>
    <div class="content-list">
        @*<div class="list-ware">
                <div class="ware-img">
                    <img src="/Content/images/admin.jpg" />
                </div>
                <div class="ware-text">
                    <span class="ware-title">家用大拖把</span>
                    <span class="ware-des">家用大拖把，让你爱上打扫。</span>
                    <span class="ware-count-price">剩余数量：128   </span>
                    <a href="#">立即兑换</a>
                </div>
            </div>*@
    </div>
    <div class="content-more">
        <a href="#" onclick="getpage()" class="a" id="pagea">点击查看更多</a>
    </div>

    <script>
        $(function () {
            getdata();
        });
        function getpage() {
            if (index == 0) {
                layer.msg('已经没有数据了');
                $('body').scrollTop($('body')[0].scrollHeight);
            } else {
                getdata();
            }
        };
        var index = 0;
        function getdata() {
            layer.load(2);
            index++;
            var levels=$("#levels").val();
            $.post("/WeChat/WareList", { index: index, levels:levels}, function (data) {
                if (data.have == 0) {
                    index = 0;
                    $("#pagea").html("已经没有数据了");
                    $("#pagea").addClass("nodata");
                }
                var html = "";
                $(data.list).each(function (idx, elm) {
                    html += '<div class="list-ware">' +
            '<div class="ware-img">' +
                '<img src="' + elm.ImageUrl + '" />' +
            '</div>' +
            '<div class="ware-text">' +
                '<span class="ware-title">' + elm.Name + '</span>' +
                '<span class="ware-des">' + elm.Remark + '</span>' +
                    '<span class="ware-count-price">剩余数量：' + elm.Count + '</span>' +
                '<a href="#" onclick="exchange(' + elm.ID + ')">立即兑换</a>' +
            '</div>' +
        '</div>';
                });
                $(".content-list").append(html);
                $('body').scrollTop($('body')[0].scrollHeight);
                layer.closeAll('loading');
            });
        };

        function exchange(id) {
            var levels = $("#levels").val();
            layer.msg('确定兑换此商品吗？', {
                time: 0,
                btn: ['确定', '取消'],
                yes: function (index) {
                    window.location = "/WeChat/Order?id=" + id + "&levels=" + levels;
                }
            });
        };
    </script>
</body>
</html>
